<template>
  <div id="svgDom" :style="{ height: height, width: width }"></div>
</template>

<script setup>
import lottie from "lottie-web";
import { onMounted } from "vue";
const props = defineProps({
  width: "100%",
  height: "100%",
  type: {
    type: String,
    default: "svg",
  },
  url: {
    required: true, // 必传
    default: "",
  },
  loop: {
    type: Boolean,
    default: true,
    //循环播放
  },
  autoplay: {
    type: Boolean,
    default: true,
    //是否i自动播放
  },
});
// 动图
const setdongImg = () => {
  lottie.loadAnimation({
    container: document.getElementById("svgDom"),
    path: props.url,
    renderer: props.type,
    loop: props.loop, //循环播放
    autoplay: props.autoplay, //是否自动播放
  });
};

onMounted(() => {
  setdongImg();
});
</script>